<template>
    <view class="step10-box step-box">
        <UNavbar title="作业告警"> </UNavbar>

        <!-- 滚动容器 -->
        <scroll-view
            class="warns-box"
            scroll-y
            @scrolltolower="loadMore"
            :scroll-with-animation="false"
        >
            <view class="warn-item-box" v-for="item in data.warnList">
                <view class="warn-img">
                    <image :src="item.url"></image>
                </view>
                <view class="warn-dev">{{ item.dev }}</view>
                <view class="warn-desc">{{ item.desc }}</view>
            </view>
            <view class="loading-box" v-if="data.loading"> 加载中... </view>
            <view
                class="no-more-box"
                v-if="data.noMore && data.warnList.length > 0"
            >
                <text class="no-more-text">没有更多数据了</text>
            </view>
        </scroll-view>

        <TabStep @leftClick="onLeftClick" @rightClick="onRightClick"></TabStep>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import TabStep from './TabStep.vue';
import UNavbar from '@/components/YNavbar/index.vue';
const data = reactive({
    warnList: [
        { url: '/static/1.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
        { url: '/static/2.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
        { url: '/static/1.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
        { url: '/static/2.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
        { url: '/static/1.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
    ],
    loading: false, // 加载状态
    noMore: false, // 是否没有更多数据
    refreshing: false, // 下拉刷新状态
    page: 1, // 当前页码
    pageSize: 5, // 每页数量
});
// 模拟数据
const mockData = [
    { url: '/static/1.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
    { url: '/static/2.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
    { url: '/static/1.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
    { url: '/static/2.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
    { url: '/static/1.jpg', dev: '执法记录仪XXX', desc: '未穿工服' },
];
const loadMore = () => {
    if (data.loading || data.noMore) return;

    data.loading = true;
    setTimeout(() => {
        const newData = mockData.map((item) => ({
            ...item,
            dev: item.dev + data.page, // 添加页码以区分不同页的数据
        }));

        data.warnList.push(...newData);
        data.loading = false;
        data.page++;

        // 模拟数据到达上限
        if (data.page > 3) {
            data.noMore = true;
        }
    }, 1000);
};
const onLeftClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step9',
    });
};

const onRightClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step11',
    });
};
</script>

<style lang="scss">
.step10-box {
    background-color: #f7f7f7;
    .warns-box {
        height: calc(100vh - 95px);
        overflow-y: auto;
        padding: 10rpx;
        box-sizing: border-box;
        // display: grid;
        // grid-template-columns: repeat(2, 1fr);
        // grid-gap: 10rpx;
        color: #999;
        font-size: 14px;
        .warn-item-box {
            .warn-img {
                width: 100%;
                image {
                    width: 100%;
                }
            }
            .warn-desc {
                color: #f3bf5e;
                padding-bottom: 20rpx;
            }
        }
    }
}
</style>
